<template>
	<el-dialog v-model="dialogVisible" title="图形配置" width="85%">
		<el-row>
			<el-col :span="12">
				<div style="border-bottom: 1px solid #ddd;">
					<h3>维度</h3>
				</div>
				<div style="margin-top: 10px;">
					<el-button type="primary" @click="onAddDimensionClickHandler" size="mini">增加</el-button>
					<el-table :data="dimensionList" style="width: 100%;" size="mini" border="true" stripe="true">
						<el-table-column label="动作">
							<template #default="scope">
								<el-button type="primary" @click="onDeleteDimensionClickHandler(scope.row)" size="mini">
									删除</el-button>
							</template>
						</el-table-column>
						<el-table-column label="字段">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.field" placeholder="请选择" clearable filterable>
									<el-option v-for="item in fieldList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="字段附加信息">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.fieldExtra" placeholder="请选择" clearable filterable>
									<el-option v-for="item in fieldExtraList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="排序">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.orderType" placeholder="请选择" clearable
									filterable>
									<el-option v-for="item in orderTypeList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
			<el-col :span="12">
				<div style="border-bottom: 1px solid #ddd;">
					<h3>指标</h3>
				</div>
				<div style="margin-top: 10px;margin-left:10px;">
					<el-button type="primary" @click="onAddMeasureClickHandler" size="mini">增加</el-button>
					<el-table :data="measureList" style="width: 100%;" size="mini" border="true" stripe="true">
						<el-table-column label="动作">
							<template #default="scope">
								<el-button type="primary" @click="onDeleteMeasureClickHandler(scope.row)" size="mini">删除
								</el-button>
							</template>
						</el-table-column>
						<el-table-column label="字段">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.field" placeholder="请选择" clearable filterable>
									<el-option v-for="item in fieldList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="类型">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.aggregateType" placeholder="请选择" clearable
									filterable>
									<el-option v-for="item in aggregateTypeList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="排序">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.orderType" placeholder="请选择" clearable
									filterable>
									<el-option v-for="item in orderTypeList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>
		<el-row style="margin-top: 10px;">
			<el-col :span="6" style="text-align: right;">只显示前几条</el-col>
			<el-col :span="6">
				<el-input size="mini" v-model="topN"></el-input>
			</el-col>
		</el-row>
		<el-row style="margin-top: 10px;">
			<el-col :span="6" style="text-align: right;">过滤条件</el-col>
			<el-col :span="6">
				<el-input size="mini" v-model="whereClause" type="textarea"></el-input>
			</el-col>
		</el-row>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" size="mini" @click="onChartConfigOk">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
	import shareData from '@/utils/shareData.js';
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: "ChartConfigDialog",
		data() {
			return {
				dialogVisible: false,
				tableName: "",
				aggregateTypeList:[],
				orderTypeList:[],
				dimensionList: [],
				measureList: [],
				topN:"",
				whereClause:"",
				componentModel:null,
				fieldList:[],
				fieldExtraList:[]
			}
		},mounted() {
			this.aggregateTypeList=shareData.aggregateTypeList;
			this.orderTypeList=shareData.orderTypeList;
			this.fieldExtraList=shareData.fieldExtraList;
		},
		methods: {
			init(tableName,componentModel) {
				this.componentModel=componentModel;
				if(componentModel["propertyMap"].dimensionList!=undefined){
					this.dimensionList = componentModel["propertyMap"].dimensionList;
				}else{
					this.dimensionList=[];
				}
				if(componentModel["propertyMap"].measureList!=undefined){
					this.measureList = componentModel["propertyMap"].measureList;
				}else{
					this.measureList=[];
				}
				if(componentModel["propertyMap"].topN!=undefined){
					this.topN = componentModel["propertyMap"].topN;
				}else{
					this.topN="";
				}
				if(componentModel["propertyMap"].whereClause!=undefined){
					this.whereClause = componentModel["propertyMap"].whereClause;
				}else{
					this.whereClause="";
				}
				if (this.tableName != tableName) {
					this.tableName = tableName;
					var that = this;
					restUtil.getAction(this,"devformdesigner/getChartConfig?tableName=" + tableName).then(
						function(response) {
							if (response.data.code == 1) {
								that.fieldList = response.data.fieldList;
							}
						});
				}
			},
			setVisible(visible) {
				this.dialogVisible = visible;
			},
			onAddDimensionClickHandler() {
				var dimension = {
					"field": "",
					"aggregateType": ""
				};
				this.dimensionList.push(dimension);
			},
			onAddMeasureClickHandler() {
				var measure = {
					"field": "",
					"aggregateType": ""
				};
				this.measureList.push(measure);
			},onDeleteDimensionClickHandler(row){
				for(var i=0;i<this.dimensionList.length;i++){
					if(this.dimensionList[i].field==row.field){
						this.dimensionList.splice(i,1);
					}
				}
			},onDeleteMeasureClickHandler(row){
				for(var i=0;i<this.measureList.length;i++){
					if(this.measureList[i].field==row.field){
						this.measureList.splice(i,1);
					}
				}
			},onChartConfigOk(){
				this.componentModel["propertyMap"]["dimensionList"]=this.dimensionList;
				this.componentModel["propertyMap"]["measureList"]=this.measureList;
				this.componentModel["propertyMap"]["topN"]=this.topN;
				this.componentModel["propertyMap"]["whereClause"]=this.whereClause;
				this.dialogVisible=false;
			}
		},
	}
</script>

<style>
</style>
